import React, { Component } from "react";
<<<<<<< HEAD
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ActivityIndicator
} from "react-native";
import DatePicker from "react-native-datepicker";
import { colors } from "../../Style/Colors";
import { wp } from "../../Style/responsive";
import { getPatientEMR } from "../../api/config";
import Toast from "react-native-simple-toast";
=======
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import DatePicker from "react-native-datepicker";
import { colors } from "../../Style/Colors";
import { wp } from "../../Style/responsive";
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05

class Emr extends Component {
  constructor(props) {
    super(props);
<<<<<<< HEAD
    this.state = { fromDate: "", toDate: "", isLoading: false, data: [] };
=======
    this.state = { fromDate: "", toDate: "" };
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
  }

  onArchive = () => {
    const { type, refNo } = this.props.screenProps;
    const { fromDate, toDate } = this.state;
    this.setState({ isLoading: true });
    getPatientEMR(type, refNo, fromDate, toDate)
      .then(data => {
        this.setState({ data, isLoading: false });
        this.props.screenProps.navigation.navigate("EmrDetails", {
          data,
          fromDate,
          toDate
        });
      })
      .catch(e => Toast.show(e.message));
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.dateWrapper}>
          <DatePicker
            style={{ width: 200 }}
            date={this.state.fromDate}
            mode="date"
            placeholder="From Date"
            format="DD-MMM-YY"
            maxDate={new Date()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
              dateIcon: {
                position: "absolute",
                left: 0,
                top: 4,
                marginLeft: 0
              },
              dateInput: {
                marginLeft: 36,
                borderWidth: 0.3,
                backgroundColor: colors.whiteColor
              }
            }}
            onDateChange={date => {
              this.setState({ fromDate: date });
            }}
          />
        </View>
        <View style={styles.dateWrapper}>
          <DatePicker
            style={{ width: 200 }}
            date={this.state.toDate}
            mode="date"
            placeholder="To Date"
            format="DD-MMM-YY"
            maxDate={new Date()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
              dateIcon: {
                position: "absolute",
                left: 0,
                top: 4,
                marginLeft: 0
              },
              dateInput: {
                marginLeft: 36,
                borderWidth: 0.3,
                backgroundColor: colors.whiteColor
              }
            }}
            onDateChange={date => {
              this.setState({ toDate: date });
            }}
          />
        </View>
<<<<<<< HEAD
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.buttonWrapper}
          onPress={this.onArchive}
        >
          {this.state.isLoading ? (
            <ActivityIndicator size="small" color={colors.whiteColor} />
          ) : (
            <Text style={styles.text}>ARCHIVE</Text>
          )}
=======
        <TouchableOpacity activeOpacity={0.8} style={styles.buttonWrapper}>
          <Text style={styles.text}>ARCHIVE</Text>
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 10,
    backgroundColor: colors.offWhite,
    justifyContent: "center"
  },
  dateWrapper: {
    padding: 10,
    justifyContent: "center",
    alignItems: "center"
  },
  buttonWrapper: {
    backgroundColor: colors.primaryColor,
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
    width: wp("52%"),
    marginHorizontal: 20,
    alignSelf: "center",
    borderRadius: 20,
    marginVertical: 10,
    marginLeft: 30
  },
  text: {
    color: colors.whiteColor,
    fontSize: 16
  }
});

export default Emr;
